import React, { Component } from "react";
import * as service from "../api/index";
import "../assets/font_r9skc8oni9/iconfont.css";
import "../assets/font_v2lqgk93uir/iconfont.css";
import {
  Swiper,
  Cascader,
  Popover,
  Ellipsis,
  Popup,
  Toast,
  Button,
} from "antd-mobile";
import "../styles/Xiangqing.scss";

import Linklist from "../components/Linklist";
import {
  AppOutline,
  UserCircleOutline,
  TravelOutline,
  StarOutline,
} from "antd-mobile-icons";
class Xiangqing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      binner: [],
      binner2: [],
      visible: false,
      setVisible: false,
      visible1: false,
      id: "",
      dizhi: [], // 这个是你选择的配送区域
      actions: [
        { key: "scan", icon: <AppOutline />, text: "首页" },
        { key: "payment", icon: <UserCircleOutline />, text: "我的" },
        { key: "bus", icon: <TravelOutline />, text: "分享" },
      ],
      options: [
        {
          label: "陕西",
          value: "陕西",
          children: [
            {
              label: "西安",
              value: "西安",
              children: [
                {
                  label: "灞桥区",
                  value: "灞桥区",
                },
                {
                  label: "高新区",
                  value: "高新区",
                },
                {
                  label: "莲湖区",
                  value: "莲湖区",
                  disabled: true,
                },
              ],
            },
            {
              label: "安康",
              value: "安康",
              children: [
                {
                  label: "汉滨区",
                  value: "汉滨区",
                },
                {
                  label: "高新区",
                  value: "高新区",
                  disabled: true,
                },
                {
                  label: "岚皋",
                  value: "岚皋",
                },
              ],
            },
            {
              label: "宁波",
              value: "宁波",
              children: [
                {
                  label: "海曙区",
                  value: "海曙区",
                },
                {
                  label: "江北区",
                  value: "江北区",
                },
                {
                  label: "镇海区",
                  value: "镇海区",
                },
              ],
            },
          ],
        },
        {
          label: "安徽",
          value: "安徽",
          children: [
            {
              label: "合肥",
              value: "合肥",
              children: [
                {
                  label: "包河区",
                  value: "包河区",
                },
                {
                  label: "蜀山区",
                  value: "蜀山区",
                },
                {
                  label: "瑶海区",
                  value: "瑶海区",
                },
              ],
            },
            {
              label: "芜湖",
              value: "芜湖",
              children: [
                {
                  label: "镜湖区",
                  value: "镜湖区",
                },
                {
                  label: "弋江区",
                  value: "弋江区",
                },
                {
                  label: "湾沚区",
                  value: "湾沚区",
                },
              ],
            },
          ],
        },
        {
          label: "江苏",
          value: "江苏",
          children: [
            {
              label: "南京",
              value: "南京",
              children: [
                {
                  label: "玄武区",
                  value: "玄武区",
                },
                {
                  label: "秦淮区",
                  value: "秦淮区",
                },
                {
                  label: "建邺区",
                  value: "建邺区",
                },
              ],
            },
            {
              label: "苏州",
              value: "苏州",
              children: [
                {
                  label: "虎丘区",
                  value: "虎丘区",
                },
                {
                  label: "吴中区",
                  value: "吴中区",
                },
                {
                  label: "相城区",
                  value: "相城区",
                },
              ],
            },
          ],
        },
      ],
    };
  }

  //打开分享弹出层
  dakai() {
    this.setState({ visible1: true });
  }
  //关闭分享弹出层
  guanbi() {
    this.setState({ visible1: false });
  }
  //跳转我的页面
  Mion() {
    this.props.history.push("/index/Mine");
  }

  //跳转首页
  Shouye() {
    this.props.history.push("/index/shouye");
  }

  //判断选中的是哪个
  panduan(text) {
    if (text == "分享") {
      this.dakai();
    }
    if (text == "我的") {
      this.Mion();
    }
    if (text == "首页") {
      this.Shouye();
    }
  }

  //子组件掉这个函数，把id传进来 再重新发请求渲染

  async getid(data) {
    console.log(data);
    var res = await service.detail_list(data);
    console.log(res);

    console.log(this);

    console.log(res.data.data);
    this.state.binner = [];
    this.state.binner.push(res.data.data.img1);
    this.state.binner.push(res.data.data.img2);
    this.state.binner.push(res.data.data.img3);
    this.state.binner.push(res.data.data.img4);
    this.setState({ list: res.data.data });
  }

  fanhui() {
    this.props.history.go(-1);
  }
  async componentDidMount() {
    var res = await service.detail_list(this.props.location.state.id);
    this.setState({ list: res.data.data });
    console.log(res.data.data);
    this.state.binner.push(res.data.data.img1);
    this.state.binner.push(res.data.data.img2);
    this.state.binner.push(res.data.data.img3);
    this.state.binner.push(res.data.data.img4);
    console.log(this.state.binner);
    console.log(this);
    // this.getid()
  }

  //收藏
  async shoucang() {
    console.log("暂无收藏接口");
  }
  //加入购物车
  async dingdan() {
    var res = await service.cart_add({
      userid: localStorage.getItem("userid"),
      proid: this.state.list.proid,
      num: 1,
    });
    console.log(res);
    if (res.data.code == 200) {
      Toast.show({
        content: "已加入购物车",
        afterClose: () => {
          console.log("after");
        },
      });
    }
  }
  Caradd() {
    this.props.history.push("/index/Car");
  }

  render() {
    return (
      <div className="Xiangqing">
        <Popup
          visible={this.state.visible1}
          onMaskClick={() => {
            this.guanbi();
          }}
          bodyStyle={{
            borderTopLeftRadius: "8px",
            borderTopRightRadius: "8px",
            minHeight: "20vh",
          }}
        >
          {
            <div className="fenxiang2">
              <div className="header"> 立即分享</div>
              <div className="center">
                <div className="item">
                  <span className="iconfont icon-weixin span1"></span>
                  <p>微信</p>
                </div>
                <div className="item">
                  <span className="iconfont icon-weibo span2"></span>
                  <p>微博</p>
                </div>
                <div className="item">
                  <span className="iconfont icon-lianjie span3"></span>
                  <p>链接</p>
                </div>
                <div className="item">
                  <span className="iconfont icon-chanpinhaibao span4"></span>
                  <p>海报</p>
                </div>
                <div className="item">
                  <span className="iconfont icon-erweima1 span5"></span>
                  <p>二维码</p>
                </div>
              </div>
            </div>
          }
        </Popup>
        <div className="my_top">
          <div className="header">
            <p
              className="iconfont icon-youjiantou"
              onClick={() => {
                this.Shouye();
              }}
            ></p>
            <div className="fenxiang">
              <Popover.Menu
                actions={this.state.actions}
                placement="bottom-start"
                onAction={(node) => this.panduan(node.text)}
                trigger="click"
              >
                <p className="iconfont icon-fenxiang"></p>
              </Popover.Menu>
            </div>
          </div>
          <div className="top_nav">
            <Swiper autoplay loop autoplayInterval={1000}>
              {this.state.binner.map((item, index) => {
                return (
                  <Swiper.Item key={index}>
                    <img src={item} alt="" />
                  </Swiper.Item>
                );
              })}
            </Swiper>

            <div className="top_center">
              <p className="jiage">￥{this.state.list.originprice}</p>
              <p className="xiaoliang">销量:{this.state.list.sales}</p>
            </div>
            <div className="top_xia">
              <p className="span1"> {this.state.list.brand}</p>
              <p className="span2"> {this.state.list.category}</p>
              <Ellipsis
                className="span3"
                rows={2}
                direction="end"
                content={this.state.list.proname}
              />
            </div>
          </div>
        </div>
        {/* 选择配送区域 */}
        <div className="quyu">
          <>
            <div
              className="button"
              onClick={() => {
                console.log("7");
                this.setState({ Visible: true });
              }}
            >
              <p>送至</p>
              <p>{this.state.dizhi.length ? this.state.dizhi : []}</p>
              <span className="iconfont icon-daishouhuo"></span>
            </div>
            <Cascader
              options={this.state.options}
              visible={this.state.Visible}
              onClose={() => {
                this.setState({ Visible: false });
              }}
              onSelect={(val) => {
                this.setState({ dizhi: val.join("/") });
                console.log(val);
                //    console.log(this.state.dizhi)
              }}
            />
          </>
        </div>
        <div className="dibu">
          <div>
            <StarOutline
              onClick={() => {
                this.shoucang();
              }}
            />
            <p>收藏</p>
          </div>

          <div
            onClick={() => {
              this.Caradd();
            }}
          >
            {" "}
            <span className="iconfont icon-gouwuche"></span>
            <p>购物车</p>
          </div>
          <div
            className="button"
            onClick={() => {
              this.dingdan();
            }}
          >
            加入订单
          </div>
        </div>
        <Linklist xiangqing={this} getid={this.getid}></Linklist>
      </div>
    );
  }
}

export default Xiangqing;
